<template>
  <div>
       <img class="back_to_top" v-show="showTop" src="../assets/backToTop.png" @click="scrollToY" />
  </div>
</template>

<script>
export default {
    name: 'BackToTop',
    data () {
        return {
            scrollTop: 0
        }
    },
    computed: {
        showTop: function () {
            return this.scrollTop > 500
        }
    },
    mounted () {
        window.addEventListener('scroll', this.getScrollTop, true)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.getScrollTop, true)
    },
    methods: {
        scrollToY() {
          let page = document.getElementsByClassName('customer')[0]
          page.scrollIntoView()
          page.scrollIntoView({ behavior: 'smooth' })
        },
        getScrollTop () {
          this.$nextTick(() => {
            let page = document.getElementsByClassName('customer')[0]
            this.scrollTop = page.getBoundingClientRect().top * -1
          })
         
        },   
    }
}
</script>

<style scoped>
.back_to_top {
    position: fixed;
    z-index: 999;
    bottom: 1.8rem;
    right: .26rem;
    width: 30px;
    height: 30px;
    overflow: hidden;
}
</style>